<template>
	<view class="content">
    <headBar title="壁纸分类"></headBar>
		<view class="" v-show="!loadShow">
			<view class="" ></view>
			<view class="ranking u-p-l-40 u-p-t-20 u-p-r-40 u-flex u-row-left">
				<view class="tab u-flex-col u-col-center u-row-center" hover-class="cate-active" hover-stay-time="50" @click="x_redirect('/jjbz/list/list?type=ranking&id=hot')">
					<view class="">热门榜</view>
					<view class="u-font-10 u-p-t-10 eng">Hot download</view>
				</view>
				<view class="tab u-flex-col u-col-center u-row-center" hover-class="cate-active" hover-stay-time="50" @click="x_redirect('/jjbz/list/list?type=ranking&id=zan')">
					<view class="">点赞榜</view>
					<view class="u-font-10 u-p-t-10 eng">Like ranking</view>
				</view>
				<view class="tab u-flex-col u-col-center u-row-center" hover-class="cate-active" hover-stay-time="50" @click="x_redirect('/jjbz/list/list?type=ranking&id=coll')">
					<view class="">收藏榜</view>
					<view class="u-font-10 u-p-t-10 eng">Collection ranking</view>
				</view>
			</view>
			<view class="category u-p-l-30 u-p-t-40 u-p-r-30">
				<view class="u-font-18 u-p-l-10">分类</view>
				<view class="u-flex u-row-left u-flex-wrap u-p-t-30">
					<view class="cate"  v-if="item.image" v-for="(item, index) in categoryList" @click="x_redirect('/jjbz/list/list?type=category&id='+item.id)" >
						<image :src="item.image" mode="aspectFill"></image>
						<view class="texts">{{item.name}}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="loading_page" v-show="loadShow">
			<image src="/static/loading/loading.gif"></image>
		</view>
    <randImg></randImg>
    <fooBar nav="list"></fooBar>
	</view>
</template>

<script>
import b from '@/common/base.js';
	export default {
		data() {
			return {
				loadShow: true,
				// 分类页数据
				categoryList: [],
			}
		},
		async onLoad() {
			let t = this
			t.getCateList()
			t.loadShow = false
		},
		methods: {
			async getCateList(){
        b.getCategoryList(this);
			},
		}
	}
</script>

<style lang="scss" scoped>

	.ranking{
		.tab{
			width: 225rpx;
			height: 100rpx;
			border-radius: 12rpx;
			color: #FFFFFF;
			.eng{
				color: #F5F5F5;
			}
		}
		.tab:nth-child(1){
			background-image: linear-gradient(to bottom right, #8acfaf, #5FBB92, #5FBB92, #8acfaf);
			margin-right: 10rpx;
		}
		.tab:nth-child(2){
			background-image: linear-gradient(to bottom right, #f0d35c, #F0B347, #F0B347, #f0d35c);
			margin-right: 10rpx;
		}
		.tab:nth-child(3){
			background-image: linear-gradient(to bottom right, #8c99de, #836AF0, #836AF0, #8c99de);
		}
	}
	.category{
		.cate{
			position: relative;
			margin-right: 10rpx;
			margin-left: 10rpx;
			margin-bottom: 20rpx;
			image{
				display: block;
				width: 325rpx;
				height: 160rpx;
				border-radius: 12rpx;
			}
			.texts{
				position: absolute;
				bottom: 20rpx;
				left: 20rpx;
				color: #FFFFFF;
			}
		}
	}
	.cate-active{
		transform:scale(0.95);
		transition: all 0.2s;
	}
</style>
